<template>
  <div class="job-page">
    <div class="job-header">
      <h2>热门岗位</h2>
      <el-button type="primary" @click="handleCreate">发布新岗位</el-button>
    </div>
    
    <el-table :data="jobList" style="width: 100%" @row-click="viewJobDetail">
      <el-table-column prop="company" label="公司名称" width="200">
        <template #default="scope">
          <div class="company-info">
            <img :src="scope.row.logo || defaultLogo" :alt="scope.row.company" class="company-logo">
            <span>{{ scope.row.company }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="岗位名称" width="200"></el-table-column>
      <el-table-column prop="location" label="工作地点" width="150"></el-table-column>
      <el-table-column prop="salary" label="薪资范围" width="150">
        <template #default="scope">
          <span class="salary-text">{{ scope.row.salary }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tags" label="岗位标签" width="200">
        <template #default="scope">
          <el-tag v-for="tag in scope.row.tags" :key="tag" size="small" :color="getTagColor(tag)" style="margin-right: 5px;">
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="postedTime" label="发布时间" width="150"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button 
            size="small" 
            :type="scope.row.isFavorite ? 'warning' : ''" 
            @click.stop="toggleFavorite(scope.row)"
          >
            {{ scope.row.isFavorite ? '已收藏' : '收藏' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 岗位详情对话框 -->
    <el-dialog v-model="dialogVisible" title="岗位详情" width="600px">
      <div v-if="selectedJob" class="job-detail">
        <div class="detail-header">
          <img :src="selectedJob.logo || defaultLogo" :alt="selectedJob.company" class="detail-logo">
          <div class="detail-title">
            <h3>{{ selectedJob.title }}</h3>
            <p>{{ selectedJob.company }}</p>
          </div>
        </div>
        
        <div class="detail-content">
          <div class="detail-row">
            <label>工作地点：</label>
            <span>{{ selectedJob.location }}</span>
          </div>
          <div class="detail-row">
            <label>薪资范围：</label>
            <span class="salary-text">{{ selectedJob.salary }}</span>
          </div>
          <div class="detail-row">
            <label>发布时间：</label>
            <span>{{ selectedJob.postedTime }}</span>
          </div>
          <div class="detail-row">
            <label>岗位标签：</label>
            <span>
              <el-tag v-for="tag in selectedJob.tags" :key="tag" size="small" :color="getTagColor(tag)" style="margin-right: 5px;">
                {{ tag }}
              </el-tag>
            </span>
          </div>
          <div class="detail-row">
            <label>岗位描述：</label>
            <span>{{ selectedJob.description }}</span>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="applyForJob">申请岗位</el-button>
          <el-button :type="selectedJob.isFavorite ? 'warning' : 'success'" @click="toggleFavorite(selectedJob)">
            {{ selectedJob.isFavorite ? '取消收藏' : '收藏岗位' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 导入收藏相关的API接口
import { addFavorite, removeFavorite, checkFavorite } from '@/api/favorite'

// 模拟岗位数据
const jobList = ref([
  {
    id: 1,
    title: '高级前端工程师',
    company: '腾讯科技',
    salary: '20K-35K',
    location: '深圳',
    postedTime: '2023-06-15',
    tags: ['全职', '远程', '弹性工作'],
    description: '负责大型Web应用的前端开发工作，需要熟练掌握Vue/React等主流框架',
    logo: '@/assets/images/tencent.png',
    isFavorite: false
  },
  {
    id: 2,
    title: 'Java架构师',
    company: '阿里巴巴',
    salary: '30K-50K',
    location: '杭州',
    postedTime: '2023-06-10',
    tags: ['全职'],
    description: '负责系统架构设计和技术团队管理，需要具备丰富的分布式系统经验',
    logo: '@/assets/images/alibaba.png',
    isFavorite: false
  },
  {
    id: 3,
    title: '产品经理',
    company: '字节跳动',
    salary: '25K-40K',
    location: '北京',
    postedTime: '2023-06-05',
    tags: ['全职', '年终奖'],
    description: '负责产品规划和用户体验优化，需要具备敏锐的市场洞察力',
    logo: '@/assets/images/bytedance.png',
    isFavorite: false
  },
  {
    id: 4,
    title: 'UI设计师',
    company: '美团',
    salary: '18K-30K',
    location: '上海',
    postedTime: '2023-06-01',
    tags: ['全职', '弹性工作'],
    description: '负责产品界面设计和用户体验优化，需要熟练使用设计工具',
    logo: '@/assets/images/meituan.png',
    isFavorite: false
  }
])

const dialogVisible = ref(false)
const selectedJob = ref(null)
const defaultLogo = ref('@/assets/images/default-company.png')

// 获取岗位列表
const getJobList = async () => {
  try {
    // 这里应该调用API获取岗位列表
    // 同时获取每个岗位的收藏状态
    for (let job of jobList.value) {
      // 检查是否已收藏
      try {
        const res = await checkFavorite(job.id)
        job.isFavorite = res.data.isFavorite
      } catch (error) {
        console.error('检查收藏状态失败:', error)
        job.isFavorite = false
      }
    }
  } catch (error) {
    console.error('获取岗位列表失败:', error)
  }
}

const viewJobDetail = (row) => {
  selectedJob.value = row
  dialogVisible.value = true
}

const toggleFavorite = async (row) => {
  try {
    if (row.isFavorite) {
      // 取消收藏
      await removeFavorite(row.id)
      row.isFavorite = false
      ElMessage.success('取消收藏成功')
      
      // 如果在详情弹窗中操作，同步更新selectedJob
      if (selectedJob.value && selectedJob.value.id === row.id) {
        selectedJob.value.isFavorite = false
      }
    } else {
      // 添加收藏
      const jobInfo = {
        title: row.title,
        company: row.company,
        salary: row.salary,
        location: row.location,
        tags: row.tags,
        postedTime: row.postedTime,
        description: row.description,
        logo: row.logo
      }
      await addFavorite({ jobId: row.id, jobInfo })
      row.isFavorite = true
      ElMessage.success('收藏成功')
      
      // 如果在详情弹窗中操作，同步更新selectedJob
      if (selectedJob.value && selectedJob.value.id === row.id) {
        selectedJob.value.isFavorite = true
      }
    }
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败: ' + (error.message || '未知错误'))
  }
}

const handleCreate = () => {
  ElMessage.info('发布新岗位')
  // 这里可以跳转到创建页面
}

const applyForJob = () => {
  ElMessage.success('已申请岗位: ' + selectedJob.value.title)
  dialogVisible.value = false
}

const getTagColor = (tag) => {
  const colors = {
    '全职': '#409eff',
    '兼职': '#67c23a',
    '实习': '#e6a23c',
    '远程': '#909399',
    '弹性工作': '#6a5acd',
    '年终奖': '#ff6b6b'
  }
  return colors[tag] || '#c0c4cc'
}

onMounted(() => {
  getJobList()
})
</script>

<style lang="scss" scoped>
.job-page {
  padding: 20px;
  background-color: #fff;
  
  .job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      color: #303133;
    }
  }
  
  .company-info {
    display: flex;
    align-items: center;
    
    .company-logo {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }
  }
  
  .salary-text {
    font-weight: bold;
    color: #6a5acd;
  }
  
  .job-detail {
    .detail-header {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
      
      .detail-logo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 20px;
        object-fit: cover;
      }
      
      .detail-title {
        h3 {
          margin: 0 0 5px 0;
          color: #303133;
        }
        
        p {
          margin: 0;
          color: #909399;
        }
      }
    }
    
    .detail-content {
      padding-top: 20px;
      
      .detail-row {
        display: flex;
        margin-bottom: 15px;
        
        label {
          width: 100px;
          font-weight: bold;
          color: #606266;
        }
        
        span {
          flex: 1;
          color: #303133;
        }
        
        .salary-text {
          font-weight: bold;
          color: #6a5acd;
        }
      }
    }
  }
  
  .dialog-footer {
    text-align: right;
  }
}
</style>